<template>
  <el-form ref="ruleForm"
           :model="form"
           label-width="90px"
           label-position="right"
           size="small"
           :rules="rules">
    <el-row>
      <el-form-item label="发货方"
                    prop="customerName"
                    :rules="[
                {
                  required: true,
                  message: `发货方不存在`,
                  validator: validateCustomer,
                  trigger: 'change'
                }
              ]">
        <el-select v-model="form.customerName"
                   clearable
                   placeholder="请选择发货方"
                   style="width: 100%"
                   filterable
                   @input="changeCustomer">
          <el-option v-for="({name}, index) in customerArr"
                     :key="index"
                     :label="name"
                     :value="name">
          </el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="联系人"
                      prop="fromContactName">
          <el-input v-model="form.fromContactName"
                    maxlength="20" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话"
                      prop="fromContactMobile">
          <el-input v-model="form.fromContactMobile"
                    maxlength="50" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="flex-start">
          <el-form-item label="发货地"
                        prop="fromArea"
                        :rules="[
                {
                  required: true,
                  message: `${form.fromArea.districtName ? '发货地错误':'请选择发货地'}`,
                  validator: validateFromArea,
                  trigger: 'change'
                }
              ]">
            <area-select v-model="form.fromArea"
                         class="w300r"
                         align="center"
                         :area-value.sync="form.fromArea"
                         @confirm="selectToArea" />
            <!-- <area-cascader v-model="form.fromArea"
                           class="w300r"
                           :props="props"
                           @input="selectToArea" /> -->
          </el-form-item>
          <el-form-item prop="fromAddress"
                        :label-width="'0px'"
                        :rules="[
                {
                  required: true,
                  message: `${form.fromAddress ? '详细地址最多输入100个字符':'请输入详细地址'}`,
                  validator: validateFromAddress,
                  trigger: 'blur'
                }
              ]">
            <el-input v-model="form.fromAddress"
                      class="w410r"
                      placeholder="请输入详细地址"
                      maxlength="100" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="发货时间"
                      prop="fromTime"
                      :rules="[
                {
                  required: true,
                  message: `${form.fromTime ? '发货时间格式错误':'请选择发货时间'}`,
                  validator: validateFromTime,
                  trigger: 'change'
                }
              ]">
          <el-date-picker v-model="form.fromTime"
                          align="left"
                          style="width: 100%"
                          type="datetime"
                          placeholder="请选择发货时间"
                          format="yyyy-MM-dd HH:mm"
                          popper-class="no-atTheMoment"
                          :default-time="'00:00:00'"
                          :picker-options="pickerOptions"
                          @change="changeTime"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import AreaSelect from "./AreaSelect.vue";
import validateForm from "./validateForm.js";
export default {
  name: "Sender",
  components: {
    AreaSelect
  },
  mixins: [validateForm],
  props: {
    record: {
      type: Object,
      default: () => { }
    },
    customerArr: {
      type: Array,
      default: () => []
    },
    systemBillObj: {
      type: Object,
      default: () => { }
    },
    mofidyToTime: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      rules: {
        customerName: [{ required: true, message: "请输入发货方名称", trigger: "blur" }],
        fromContactName: [{ required: true, message: "请输入发货联系人", trigger: "blur" }],
        fromContactMobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        fromAddress: [{ required: true, message: "请输入发货地址", trigger: "blur" }],
        fromTime: [{ required: true, message: "请选择发货时间", trigger: "change" }],
      },
      form: {
        customerName: null,
        fromContactName: null,
        fromContactMobile: null,
        fromArea: {
          cityName: null,
          districtName: null,
          provinceName: null
        },
        fromAddress: null,
        fromTime: null,
      },
      props: {
        label: 'name',
        value: 'areaCode',
        checkStrictly: true
      },
      customerFlag: true, //发货方不存在
      customerFromTimeFlag: true, //发货时间错误
      fromAreaFlag: true, //发货地错误
      errors: []
    };
  },
  computed: {
    pickerOptions () {
      return {
        // 时间选择限制 发货时间
        disabledDate: (time) => {
          if (this.systemBillObj.billDateFlag) {
            if (this.toTime) {
              return (
                time.getTime() <=
                new Date(
                  new Date(this.systemBillObj.sameMonthDay).setDate(
                    new Date(this.systemBillObj.sameMonthDay).getDate() - 1
                  )
                ).getTime() || time.getTime() > new Date(this.toTime).getTime()
              );
            } else {
              return (
                time.getTime() <=
                new Date(
                  new Date(this.systemBillObj.sameMonthDay).setDate(
                    new Date(this.systemBillObj.sameMonthDay).getDate() - 1
                  )
                ).getTime()
              );
            }
          } else if (this.toTime) {
            return (
              time.getTime() <=
              new Date(
                new Date(this.systemBillObj.lastMonthDay).setDate(
                  new Date(this.systemBillObj.lastMonthDay).getDate() - 1
                )
              ).getTime() || time.getTime() > new Date(this.toTime).getTime()
            )
          } else {
            return (
              time.getTime() <=
              new Date(
                new Date(this.systemBillObj.lastMonthDay).setDate(
                  new Date(this.systemBillObj.lastMonthDay).getDate() - 1
                )
              ).getTime()
            )
          }
        }
      }
    }
  },
  watch: {
    mofidyToTime (val) {
      this.toTime = val;
    }
  },
  created () {
    this.form = {
      customerName: this.record.customerName,
      fromContactName: this.record.fromContactName,
      fromContactMobile: this.record.fromContactMobile,
      fromArea: {
        cityName: this.record.fromCity,
        districtName: this.record.fromDistrict,
        provinceName: this.record.fromProvince,
      },
      fromAddress: this.record.fromAddress,
      fromTime: this.record.fromTime,
    }
    this.toTime = this.record.toTime;
    this.errors = this.record?.errors || [];
    if (this.errors && this.errors.length) {
      this.errors.map(item => {
        if (item.field === "fromTime") {
          this.form.fromTime = null;
        }
        if (item.field === "toTime") {
          this.toTime = null;
        }
      })
    }
  },
  mounted () {
    this.validateForm();
  },
  methods: {
    // 校验规则
    validateForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
    },
    changeCustomer (val) {
      if (val) {
        this.customerArr.map(item => {
          if (item.name === val) {
            this.form.fromContactName = item.contactName;
            this.form.fromContactMobile = item.contactMobile;
          }
        })
        this.customerFlag = false;
      }
      this.$emit("updateCustomer", val)
    },
    changeTime (val) {
      if (val) {
        this.form.fromTime = this.$moment(val).format("YYYY-MM-DD HH:mm");
        this.customerFromTimeFlag = false;
      }
      this.$emit("updateFromTime", val)
    },
    // 地区
    selectToArea (val) {
      this.form.fromArea = Object.assign(this.form.fromArea, val);
      this.form.fromCity = val.cityName;
      this.form.fromDistrict = val.districtName;
      this.form.fromProvince = val.provinceName;
      this.fromAreaFlag = false;
    },
  }
};
</script>

<style lang="scss" scoped>
.no-atTheMoment
  .el-picker-panel__footer
  .el-button--text.el-picker-panel__link-btn {
  display: none !important;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
}
.w300r {
  width: 300px !important;
}
.w410r {
  width: 410px !important;
}
</style>
